<template>
  <view class="container merchart_main">
    <view class="mer_top">
      <view class="mer_top_item">
        <view class="mer_top_value">{{dataInfo.look_cnt || '-'}}</view>
        <view class="mer_top_label">带看次数</view>
      </view>
      <view class="mer_top_item">
        <view class="mer_top_value">{{ dataInfo.deal_cnt || '-' }}</view>
        <view class="mer_top_label">成交次数</view>
      </view>
      <view class="mer_top_item">
        <view class="mer_top_value">{{dataInfo.rate ? dataInfo.rate +'%' : '-'}}</view>
        <view class="mer_top_label">成交率</view>
      </view>
    </view>
<!--    新建 -->
    <view class="mer_add_section">
      <view class="add_left" @click="() => addNew(operateType.client)">
        <view class="add_item add_left_inner">
          <view class="add_fun_text">新建客户</view>

          <view class="add_fun_desp">快来创建您的客户吧</view>
          <view class="add_quick">快速新建</view>
          <view class="bg_img">
            <image src="@/static/img/bg_client.png"></image>
          </view>
        </view>
      </view>
      <view class="add_right">
        <view class="add_item add_clues" @click="() => addNew(operateType.clues)">

          <view class="add_item_title">
            <view class="add_fun_text">新建线索</view>
            <view class="arrow_icon"><tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon></view>
          </view>
          <view class="add_fun_desp">客户有意向? 来添加线索吧</view>
          <view class="bg_img">
            <image src="@/static/img/bg_clues.png"></image>
          </view>
        </view>
        <view class="add_item add_channel" @click="() => addNew(operateType.channel)">
          <view class="add_item_title">
            <view class="add_fun_text">新建渠道</view>
            <view class="arrow_icon"><tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon></view>
          </view>
          <view class="add_fun_desp">创建您的中介渠道</view>
          <view class="bg_img">
            <image src="@/static/img/bg_channel.png"></image>
          </view>
        </view>
      </view>
    </view>

<!--     招商统计 -->
    <view class="static_area">
      <view class="area_title">招商统计</view>
      <view class="select_date" @click="selectTime">
        <view class="date_view">{{timeData.date}}</view>
        <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1" style="transform: rotate(90deg);"></tm-icon>
      </view>
    </view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="static_title">
        <view class="static_title_text">线索统计</view>
        <view class="check_btn"  @click="() => checkDetail(operateType.clues)">
          <text class="check_text">查看</text>
          <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1" ></tm-icon>
        </view>
      </view>
      <view class="static_inner clubs_main">

          <view class="clubs_item">
            <view class="main_value">{{dataInfo.clue_add_cnt || '-'}}</view>
            <view class="main_text">新增线索</view>
          </view>
        <view class="clubs_item">
            <view class="main_value">{{dataInfo.clue_potential_cnt || '-'}}</view>
            <view class="main_text">潜在客户</view>
          </view>
        <view class="clubs_item">
            <view class="main_value">{{dataInfo.clue_invalid_cnt || '-'}}</view>
            <view class="main_text">无效客户</view>
          </view>
        <view class="clubs_item">
            <view class="main_value">{{dataInfo.cluetransfer_cnt || '-'}}</view>
            <view class="main_text">转客户</view>
          </view>

      </view>
    </tm-sheet>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="static_title">
        <view class="static_title_text">客户统计</view>
        <view class="check_btn"  @click="() => checkDetail(operateType.client)">
          <text class="check_text">查看</text>
          <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
        </view>
      </view>
      <view class="static_inner client_main">

          <view class="client_item">
            <view class="main_value">{{dataInfo.customer_add_cnt || '-'}}</view>
            <view class="main_text">新增客户</view>
          </view>
        <view class="client_item">
            <view class="main_value">{{dataInfo.customer_notdoor_cnt || '-'}}</view>
            <view class="main_text">未上门</view>
          </view>
          <view class="client_item">
            <view class="main_value">{{dataInfo.customer_door_cnt || '-'}}</view>
            <view class="main_text">已上门</view>
          </view>
          <view class="client_item">
            <view class="main_value">{{dataInfo.customer_signing_cnt || '-'}}</view>
            <view class="main_text">已签约</view>
          </view>
          <view class="client_item">
            <view class="main_value">{{dataInfo.customer_loss_cnt || '-'}}</view>
            <view class="main_text">已流失</view>
          </view>

      </view>
    </tm-sheet>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="static_title">
          <view class="static_title_text">渠道统计</view>
        <view class="check_btn"  @click="() => checkDetail(operateType.channel)">
            <text class="check_text">查看</text>
            <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
          </view>
      </view>
      <view class="static_inner channel_main">
        <view class="channel_item channel01">
         <view class="channel_inner">
           <view class="channel_tag">中介渠道</view>
           <view class="channel_value">{{dataInfo.channel_intermediary_cnt || '-'}}</view>
           <view class="channel_label">本月新增</view>
         </view>
        </view>
        <view class="channel_item channel02">
          <view class="channel_inner">
            <view class="channel_tag">关系渠道</view>
            <view class="channel_value">{{dataInfo.channel_relationship_cnt || '-'}}</view>
            <view class="channel_label">本月新增</view>
          </view>
        </view>
        <view class="channel_item channel03">
          <view class="channel_inner">
            <view class="channel_tag">推广渠道</view>
            <view class="channel_value">{{dataInfo.channel_promotion_cnt || '-'}}</view>
            <view class="channel_label">本月新增</view>
          </view>
        </view>
        <view class="channel_item channel04">
          <view class="channel_inner">
            <view class="channel_tag">其他渠道</view>
            <view class="channel_value">{{dataInfo.channel_other_cnt || '-'}}</view>
            <view class="channel_label">本月新增</view>
          </view>
        </view>
      </view>
    </tm-sheet>
      <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="static_title">
          <view class="static_title_text">账单管理</view>
        <view class="check_btn"  @click="() => toList()">
            <text class="check_text">查看</text>
            <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
          </view>
      </view>
    </tm-sheet>

<!--     时间选择框-->
    <u-datetime-picker
        :show="visible"
        v-model="timeData.time"
        mode="year-month"
        @confirm="selectFilterTime"
    ></u-datetime-picker>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import moment from 'moment'
import { mainMerchants } from '@/api_request/api'

const dataInfo = ref<any>({})

enum operateType{
  clues, // 线索
  client, // 客户
  channel // 渠道
}
const visible = ref<Boolean>(false)


const timeData = ref<any>({
  date: moment().format('YYYY-MM'),
  time: moment().valueOf()
})
console.log('jp=======timeData',timeData)
const getMainData = (data?) => {
  mainMerchants(data).then(res=> {
    console.log('jp======res',res)
    dataInfo.value = res.data
  })
}

getMainData()
const selectTime = () => {
  visible.value = true
}
const selectFilterTime = (val) => {
  console.log('jp======val',val)
  console.log('jp======111',moment(val.value).format('YYYY-MM-DD'))
  visible.value = false
  timeData.value.time = val.value
  timeData.value.date = moment(val.value).format('YYYY-MM')
  getMainData({time: val.value})
}
// 新建
const addNew = (type) => {
  // 改路径
  let path = ''
  if(type === operateType.clues) {
    path = `/subpkg/add_clues/add_clues?type=add`
  } else if(type === operateType.client) {
    path = ''
  } else if(type === operateType.channel){
    path = `/subpkg/create_channel/index?title='新建渠道'`
  }
  uni.navigateTo({url: path})
}
const checkDetail = (type) => {
  let path = ''
  if(type === operateType.clues) {
    path = '/subpkg/clues_list/index'
  } else if(type === operateType.client) {
    path = '/subpkg/client_list/index'
  } else if(type === operateType.channel){
    path = '/subpkg/channel_list/index'
  }
  uni.navigateTo({url: path})
}
const toList= ()=>{
    console.log('132', '2023/11/28 21:43')
    uni.navigateTo({url: '/subpkg/tenant/tenantList/index'})
}
</script>

<style lang="scss" scoped>
@import "~@/static/css/merchants.scss";
  .merchart_main{
	  background: #F0F9FF;
    .mer_top{
      display: flex;
      padding: 30px 0 20px;
      .mer_top_item{
        width: 33.33%;
        text-align: center;
      }
    }
    .mer_top_value{
      font-szie: $cus-font-size-16;
      color: $cus-color-2;
    }
    .mer_top_label{
      font-size: $cus-font-size-12;
      color: $cus-color-1;
    }

    .mer_add_section{
      display: flex;
      padding: 0 10px;
      .add_item{
        position: relative;
        padding: 12px;
      }
      .add_left_inner{
        padding-top: 20px;
        padding-bottom: 20px;
        background: linear-gradient(135deg, #E9ECFC 0%, #B6C3FC 100%);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        .add_fun_desp{
          padding-top: 12px;
        }
      }
      .add_right,.add_left{
        width: 50%;
        box-sizing: border-box;
      }
      .add_left{
        padding-right: 6px;
      }
      .add_right{
        padding-left: 6px;
      }
      .add_fun_text{
        font-size: $cus-font-size-16;
        color: $mer-color-2;
      }
      .arrow_icon{
        background: #fff;
        width: 18px;
        height: 18px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
      }
      .add_fun_desp{
        color: $mer-color-3;
        font-size: $cus-font-size-12;
        padding-top: 8px;
        position: relative;
        z-index: 10;
      }
      .add_quick{
        width: 80px;
        height: 26px;
        line-height: 26px;
        background: #fff;
        color: $mer-color-2;
        border-radius: 4px;
        text-align: center;
        font-size: $cus-font-size-14;
        margin-top: 30px;
      }
      .add_item_title{
        display: flex;
        align-items: center;
      }
      .bg_img{
        position: absolute;
        right:0px;
        bottom:10px;
        width: 40px;
        height: 40px;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .add_clues{
        background: linear-gradient(135deg, #DCF1EE 0%, #BCDCFC 100%);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
      }
      .add_channel{
        margin-top: 8px;
        background: linear-gradient(135deg, #DEF4EB 0%, #AFE6CE 100%);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        .add_fun_text{
          color: $mer-color-4;
        }
        .add_fun_desp{
          color: $mer-color-5;
        }
      }
    }
    .static_area{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px 14px;
      .area_title{
        font-size: $cus-font-size-16;
      }
      .select_date{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .date_view{
          padding-right: 4px;
        }
      }

    }
    .static_title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      .check_btn{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .check_text{
        color: $cus-color-1;
        font-size: $cus-font-size-12;
        padding-right: 4px;
      }
    }
    .static_title{
      font-size: $cus-font-size-16;
    }
    .channel_main{
      display: flex;
      justify-content: space-around;
    }
    .static_inner{
      display: flex;
      .clubs_item{
        width: 25%;
        text-align: center;
      }
      .client_item{
        width: 20%;
        text-align: center;
      }
      .main_text{
        font-size: $cus-font-size-12;
        color: $cus-color-1;
        padding-top: 14px;
      }
      .main_value{
        color:$cus-color-2;
        font-size: $cus-font-size-16;
      }
      .channel_item{
        position: relative;
        width: 25%;
        padding-right: 10px;
        .channel_inner{
          border-radius: 5px;
          text-align: center;
        }
        .channel_tag{
          position: absolute;
          top: 0;
          left: 0;
          width: 60px;
          height: 18px;
          line-height: 18px;
          font-size: $cus-font-size-12;
          color: #fff;
          text-align: center;
          border-radius: 5px 0 5px 0;
        }
        .channel_value{
          color: $cus-color-2;
          font-size: $cus-font-size-16;
          padding-top: 32px;
          padding-bottom: 10px;
        }
        .channel_label {
          color: $mer-color-6;
          font-size: $cus-font-size-12;
          font-size: 10px;
          padding-bottom: 8px;
        }
      }
      .channel01{
        .channel_inner{
          background: #EDF8FF;
          .channel_tag{
            background: #98B8FF;
          }
        }

      }
      .channel02{
        .channel_inner {
          background: #E8FFEA;

          .channel_tag {
            background: #7ADFA3;
          }
        }
      }
      .channel03{
        .channel_inner {
          background: #FFF7E8;

          .channel_tag {
            background: #FFB064;
          }
        }
      }
      .channel04{
        padding-right: 0;
        .channel_inner {
          background: #F5E8FF;

          .channel_tag {
            background: #BFA7E8;
          }
        }
      }
    }
  }




</style>